<template>
  <div class="main-back">
    <MainTitle :main-title="mainTitle" />
    <el-button class="view-button" type="primary" @click="openView">返回</el-button>
    <div class="container">
      <div class="process">
        <div class="process-item">
          <span>CAD历史数据</span>
          <div class="item-content">
            <div class="box">
              <span class="textCDA">CDA</span>
              <span>数据仓库</span>
            </div>
          </div>
        </div>
        <div class="process-item process-item-two">
          <span>神经网络</span>
          <div class="item-content">
            <img src="~@assets/report/sjwl1.gif" alt="">
            <img src="~@assets/report/sjwl2.gif" alt="">
          </div>
        </div>
        <div class="process-item">
          <span>CDA转化效率</span>
          <div class="item-content">
            <img src="~@assets/report/quxian.png" alt="">

          </div>
        </div>
        <div class="process-item">
          <span>优化开机建议</span>
          <div class="item-content">
            <img src="~@assets/report/zykjjy1.gif" alt="">
          </div>
        </div>
        <div class="process-item">
          <span>推荐结果</span>
          <div class="item-content">
            <table border="1px solid aqua" border-collapse="collapse">
              <tr>
                <td>CDA</td>
                <td>负载率</td>
                <td>压力上限</td>
                <td>压力下限</td>
              </tr>
              <tr>
                <td>1#</td>
                <td>80%</td>
                <td>7.4</td>
                <td>7.6</td>
              </tr>
              <tr>
                <td>2#</td>
                <td>80%</td>
                <td>7.4</td>
                <td>7.6</td>
              </tr>
              <tr>
                <td>3#</td>
                <td>80%</td>
                <td>7.4</td>
                <td>7.6</td>
              </tr>
              <tr>
                <td>4#</td>
                <td>80%</td>
                <td>7.4</td>
                <td>7.6</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="introduce">
        <div class="int-left">
          <div class="int-item">
            <div class="int-item-title">CDA历史数据</div>
            <p>CDA设备积累的大量宝贵历史运行数据，为大数据分析与深度学习神经网络模型，提供了良好的输入特征，如单台流量、设备运行状态、BOV/IGV开度、系统运行状态(干燥器、冷却系统)等特征，历史数据中所包含的信息可以通神经网络完美模拟出设备的运行与CDA转化效率，CDA历史数据为优化算法提供基础与“动力”。</p>
          </div>
          <div class="int-item">
            <div class="int-item-title">神经网络</div>
            <p>神经网络构造如同人类大脑神经元，实质是数学模型，分为输入层、中间层、输出层。可捕捉复杂系统的非线性关系。决定CDA转化效率的各种因素，在这里被神经网络识别和获取。</p>
            <img src="~@assets/report/sjwl3.gif" alt="">
          </div>
        </div>
        <div class="int-center">
          <div class="int-item int-item-single">
            <div class="int-item-title">CDA转化效率</div>
            <p>空气压缩机是否节能的判断标准为“CDA转化效率”。所谓的CDA转化效率就是单位电能所能够生产的产气量。单位是：(m³/h)/kw。<br>
              CDA转化效率越高，单位电量所能产生的压缩空气就越多。<br>
              设备使用过程中面临不同的生产状况，包括满载、半载、热备等；在不同的运行状态下或load下，其产气量与能耗是不成比例变化的，导致其CDA转化效率的变化。</p>
            <div class="charts-group">
              <div class="charts">
                <div class="charts-title">CDA转化效率DNN模型结果</div>
                <table>
                  <tr>
                    <td>模型方案</td>
                    <td>MAE</td>
                    <td>MAPE</td>
                  </tr>
                  <tr>
                    <td>DNN</td>
                    <td>0.041</td>
                    <td>0.67%</td>
                  </tr>
                </table>
              </div>
              <div class="charts">
                <div class="charts-title">模型测试拟合曲线</div>
                <img src="~@assets/report/nihetu.png" alt="">
              </div>
            </div>
            <div class="charts-title">模型计算CDA转化效率曲线</div>
            <img src="~@assets/report/曲线图2.png" alt="">
          </div>
        </div>
        <div class="int-right">
          <div class="int-item">
            <div class="int-item-title">优化开机建议</div>
            <p>优化算法通过用户输入需求，结合DNN模型加载出的效率曲线，组合出百万级以上的分配方案，选取节能、安全的可实现开机方案。</p>
            <div class="charts-title">
              <br>
              流程框图
              <br>
            </div>
            <img src="~@assets/report/zykjjy2.gif" alt="">
          </div>
          <div class="int-item">
            <div class="int-item-title">推荐结果</div>
            <p>按照优化开机建议使用后
              <br>
              <br>
            </p>
            <div class="charts-title">节能效果</div>
            <table>
              <tr>
                <td>系统</td>
                <td>预计节能百分比</td>
                <td>实际节能百分比</td>
              </tr>
              <tr>
                <td>HCDA</td>
                <td>5%</td>
                <td>4%</td>
              </tr>
              <tr>
                <td>LCDA</td>
                <td>6%</td>
                <td>7%</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    MainTitle: () => import('@/components/MainTitle.vue')
  },
  data() {
    return {
      mainTitle: '能源监控-CDA开机建议原理简介'
    }
  },
  methods: {
    openView() {
      this.$router.push({ name: 'bootSuggestion' })
    }
  }
}
</script>
<style lang="scss" scoped>
.main-back{
  /* padding: 0 5%; */
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  background-image: url('~@assets/report/bg.png');
  background-size: 100% 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.view-button{
  width: 8rem;
  height: 2.5rem;
  line-height: 2.5rem;
  position: absolute;
  top: 4%;
  right: 2.5%;
  font-size: 1rem;
  color:white;
  align-self: flex-end;
  background-color: #05417f !important;
  border: 0;
  border-radius: 0;
  padding: 0 10px;
  }
.container{
  width: 93%;
  display: flex;
  flex-flow: column;
  height: 82%;
  margin: 1rem auto 0;
    overflow-y:scroll;
  // 隐藏滚动条
  &::-webkit-scrollbar {// 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {// 兼容Opera
    display: none;
  }
  scrollbar-width: none;// 兼容Firefox
  -ms-overflow-style: none;// 兼容edge
}
.process{
  width: 100%;
  display: flex;
}
.process-item{
  flex-basis:16.6%;
  text-align: center;
}
.process-item.process-item-two{
  flex-basis:33.3%;
}
.process-item>span{
  display: inline-block;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: aqua;
  padding: 0 0.7rem;
  border: 1px solid #ccc;
  background: rgb(12, 12, 31);
}
.item-content{
  width: 100%;
  border: 1px dashed #ccc;
  margin-top: -1rem;
  padding-top: 2rem;
  height: 22rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-content img{
  height: 83%;
  margin: 0 2rem;
}
.box{
  width: 65%;
  margin: 1.5rem auto 2.5rem;
  border: 1.5px solid aqua;
  padding: 4.5rem 0;
}
.box>span{
  display: block;
  font-size: 2rem;
  font-weight: 600;
  line-height: 3rem;
  color: aqua;
  text-align: center;
}
.box>span.textCDA{
  font-size: 2.8rem;

}
.process table{
  margin: 1rem auto 0;
  border-collapse:collapse;
}
.process table,.process td
{
    border: 1px solid aqua;
    padding: 1rem 0.7rem;
}
.introduce{
  height: 70%;
  display: flex;
  justify-content: space-between;
}
.int-left,.int-center,.int-right{
  flex-basis: 31%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.int-item{
  width: 100%;
  border-top: 1.5px solid aqua;
  margin-top: 2rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.int-item.int-item-single{
  height: 100%;
}
.int-item-title{
  height: 3rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 3rem;
}
.int-item p{
  color: #ddd;
  line-height: 2.2rem;
  margin: 0;
}
.int-item img{
  width: 100%;
}
.charts-group{
  display: flex;
  justify-content: space-between;
}
.charts{
  flex-basis: 49%;
}
.charts-title{
  color: aqua;
  line-height: 2rem;
  font-size: 1.2rem;
}
.charts table{
  margin-top: 0.5rem;
  border-collapse:collapse;
}
.charts table,.charts td{
    border: 1px solid aqua;
    padding: 1.6rem 1.5rem;
    text-align: center;
    color: #ddd;
}
.int-item>table{
  width: 100%;
  margin-top: 0.5rem;
  border-collapse:collapse;
}
.int-item>table,.int-item>table td{
    border: 1px solid aqua;
    padding: 1.2rem 1.5rem;
    text-align: center;
    color: #ddd;
}
</style>
